<script lang="ts" setup>
import { ref } from 'vue'
import { getPage as getTeamPage, SearchTeam, Team } from '../../../api/team'
import { addUser, getDetail as getUserDetail, updateUser, UserForm } from '../../../api/user'
import { ElMessageBox } from 'element-plus/es'

const pros = defineProps({
  onSearch: {
    type: Function,
    default: null
  }
})
const dialogVisible = ref(false)

const form = ref<UserForm>({
  id: '',
  username: '',
  nickname: '',
  password: '',
  email: '',
  status: 1,
  roleIds: [],
  teamId: '1'
})
const checkRoleList = ref(['超级管理员'])
const title = ref('')
const isAdd = ref(true)
const showForAdd = () => {
  loadTeamList()
  // 清空表单
  form.value = {
    id: '',
    username: '',
    nickname: '',
    password: '',
    email: '',
    status: 1,
    roleIds: [],
    teamId: '1'
  }
  title.value = '添加用户信息'
  dialogVisible.value = true
  isAdd.value = true
}

const showForEdit = (userId: string) => {
  loadTeamList()
  getUserDetail(userId).then(res => {
    const roleIds: string[] = []
    res.roles.forEach(r => {
      roleIds.push(r.id)
    })
    form.value = {
      id: res.userInfo.id,
      username: res.userInfo.username,
      nickname: res.userInfo.nickname,
      password: '',
      email: res.userInfo.email,
      status: res.userInfo.status,
      roleIds,
      teamId: res.team.id
    }
    title.value = '添加用户信息'
    dialogVisible.value = true
    isAdd.value = false
  })
}
const teamList = ref<Team[]>([])
const loadTeamList = () => {
  const p: SearchTeam = { page: 1, pageSize: 999, teamName: '' }
  getTeamPage(p).then(res => {
    teamList.value = res.list
  })
}

const clickSubmitBut = () => {
  if (isAdd.value) {
    addUser(form.value).then(res => {
      dialogVisible.value = false
      pros.onSearch()
    })
  } else {
    updateUser(form.value).then(res => {
      dialogVisible.value = false
      pros.onSearch()
    })
  }
}

const handleCloseForAdd = (done: () => void) => {
  ElMessageBox.confirm('关闭窗口将清空输入的内容，确认关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

defineExpose({
  showForAdd,
  showForEdit
})

</script>
<template>
  <el-dialog
      v-model="dialogVisible"
      :before-close="handleCloseForAdd"
      :title="title"
      width="40%"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="账户">
        <el-input v-model="form.username" class="form-input"/>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" class="form-input"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" class="form-input"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" class="form-input"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label=1>正常</el-radio>
          <el-radio :label=2>冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色">
        <el-checkbox-group v-model="checkRoleList">
          <el-checkbox label="超级管理员" name="type"/>
          <el-checkbox label="系统管理员" name="type"/>
          <el-checkbox label="用户" name="type"/>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="团队">
        <el-select v-model="form.teamId" filterable placeholder="please select your zone">
          <el-option v-for="item in teamList" :key="item.id" :label="item.teamName" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible.value = false">取消</el-button>
        <el-button type="primary" @click="clickSubmitBut">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.form-input {
  width: 350px;
}
</style>
